import React, {useState} from 'react';
import makeStyles from "@material-ui/styles/makeStyles";
import Dialog from "@material-ui/core/Dialog";
import DialogContent from "@material-ui/core/DialogContent";
import Slide from "@material-ui/core/Slide";
import {Badge, Card, Paper, Typography} from "@material-ui/core";
import Grid from "@material-ui/core/Grid";
import CardMedia from "@material-ui/core/CardMedia";
import {useHistory} from "react-router-dom";
import IconButton from "@material-ui/core/IconButton";
import CloseOutlinedIcon from '@material-ui/icons/CloseOutlined';
import {useDispatch} from "react-redux";
import SnackbarMessage from "../../../Common/Snackbar/SnackbarMessage";
import {createNewIndicatorRequest} from "../../../../../../redux/reducers/gqiEditor";
import {getAllPlatforms, resetIndicatorSession} from "../../../../../../redux/reducers/editor";

const useStyles = makeStyles((theme) => ({
  gridContainer: {
    margin: theme.spacing(6, 0, 3, 0)
  },
  gridContainerSubtitle: {
    margin: theme.spacing(1, 0, 5, 0),
  },
  mainContainer: {
    padding: theme.spacing(4),
  },
  typographyHeader: {
    margin: theme.spacing(6, 0, 4, 0),
  },
  paperCard: {
    display: "block",
    transition: "all .35s linear",
    boxShadow: " 0px 8px 9px 0px rgba(0,0,0,0.4)",
    "&:hover": {
      boxShadow: "-1px 10px 29px 0px rgba(0,0,0,0.8)"
    }
  },
  cardMedia: {
    margin: theme.spacing(-3, 'auto', 0, 'auto')
  },
  media: {
    margin: theme.spacing(0, 'auto', 0, 'auto'),
    width: theme.spacing(11),
    height: theme.spacing(11)
  },
  gridCard: {
    margin: theme.spacing(3, 'auto', 0, 'auto'),
  },
  gridCardContent: {
    margin: theme.spacing(3),
  }
}))

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="up" ref={ref} {...props} />;
});


export default function ModalCreateNewIndicator(props) {
  // Props
  const {
    openDialog,
    setOpenDialog,
  } = props;

  // Local constants
  const classes = useStyles();
  let history = useHistory();
  const dispatch = useDispatch();
  const [openEditorErrorSnackbar, setOpenEditorErrorSnackbar] = useState(false);


  const handleConfirmIndicatorChoice = (indicatorType) => {
    if (indicatorType === "Basic Indicator") {
      dispatch(createNewIndicatorRequest(indicatorType));
      dispatch(resetIndicatorSession());
      dispatch(getAllPlatforms());
      // dispatch(setLeftDrawerMenuIndex(3));
      history.push("/basic");
    } else if (indicatorType === "Composite Indicator") {
      history.push("/composite");
      // setOpenEditorErrorSnackbar(!openEditorErrorSnackbar);
    } else if (indicatorType === "Multi-level Indicator") {
      // history.push("/multi-level");
      setOpenEditorErrorSnackbar(!openEditorErrorSnackbar);
    }
  }

  return (
    <Dialog
      open={openDialog}
      TransitionComponent={Transition}
      keepMounted
      onClose={() => setOpenDialog(!openDialog)}
      maxWidth={"md"}
    >
      <DialogContent>
        <Grid container direction="row" justify="flex-end">
          <IconButton onClick={() => setOpenDialog(!openDialog)}>
            <CloseOutlinedIcon/>
          </IconButton>
        </Grid>
        <Grid container direction="column" className={classes.mainContainer}>
          <Grid container direction="column" alignItems="center">
            <Typography variant='h4'>
              Select a type of indicator
            </Typography>
            <Grid item className={classes.gridContainerSubtitle}>
              <Typography variant={'body1'}>
                Select one of the following types of indicator to create a new indicator
              </Typography>
            </Grid>
          </Grid>

          <Grid container spacing={4} justify="center" style={{marginTop: 8}}>
            <Grid item xs={12} sm={6} md={4} style={{marginBottom: 16}}>
              <Paper
                style={{height: "100%", cursor: "pointer"}}
                elevation={10}
                className={classes.paperCard}
                onClick={() => handleConfirmIndicatorChoice("Basic Indicator")}
              >
                <Grid container direction="column">
                  <Card className={classes.cardMedia} elevation={10}>
                    <CardMedia
                      image="/images/indicators/basicIndicator.svg"
                      className={classes.media}
                    />
                  </Card>
                  <Grid item className={classes.gridCard}>
                    <Typography variant="h5"> Basic indicator </Typography>
                  </Grid>
                  <Grid item className={classes.gridCardContent}>
                    <Typography  gutterBottom>
                      A simple and easy indicator type that is precisely
                      mapped to the Goal-Question-Indicator approach.
                    </Typography>
                    <Typography >
                      It follows a four-step process to generate a new
                      indicator:
                    </Typography>
                    <Typography  style={{marginTop: 6}}>
                      <li>Define a dataset</li>
                      <li>Apply various filters</li>
                      <li>Select an analytics method</li>
                      <li>
                        Specify visualization techniques to render the
                        indicator
                      </li>
                    </Typography>
                  </Grid>
                </Grid>
              </Paper>
            </Grid>

            {/* Composite Indicator */}
            <Grid item xs={12} sm={6} md={4} style={{marginBottom: 16}}>
              <Paper
                style={{height: "100%", cursor: "pointer"}}
                elevation={10}
                className={classes.paperCard}
                onClick={() => handleConfirmIndicatorChoice("Composite Indicator")}
              >
                <Grid container direction="column">
                  <Badge color="primary" overlap="rectangle" badgeContent={"New"}
                         anchorOrigin={{vertical: 'bottom', horizontal: 'center'}}>
                    <Card className={classes.cardMedia} elevation={10}>
                      <CardMedia
                        image="/images/indicators/compositeIndicator.svg"
                        className={classes.media}
                      />
                    </Card>
                  </Badge>
                  <Grid item className={classes.gridCard}>

                    <Typography variant="h5">
                      Composite indicator
                    </Typography>

                  </Grid>
                  <Grid item className={classes.gridCardContent}>
                    <Typography  gutterBottom>
                      A combination of multiple Basic Indicators. The
                      combined indicators must have similar analytics
                      methods.
                    </Typography>
                    <Typography >
                      The analysis results of each Basic Indicators are
                      cumulatively analyzed and visualized.
                    </Typography>
                  </Grid>
                </Grid>
              </Paper>
            </Grid>

            {/* Multi-level Indicator */}
            <Grid item xs={12} sm={6} md={4} style={{marginBottom: 16}}>
              <Paper
                style={{height: "100%", cursor: "pointer"}}
                elevation={10}
                className={classes.paperCard}
                onClick={() => handleConfirmIndicatorChoice("Multi-level Indicator")}
              >
                <Grid container direction="column">
                  <Badge color="secondary" overlap="rectangle" badgeContent={"Not available"}
                         anchorOrigin={{vertical: 'center', horizontal: 'left'}}>
                    <Card className={classes.cardMedia} elevation={10}>
                      <CardMedia
                        image="/images/indicators/multiIndicator.svg"
                        className={classes.media}
                      />
                    </Card>
                  </Badge>
                  <Grid item className={classes.gridCard}>
                    <Typography variant="h5">
                      Multi-level indicator
                    </Typography>
                  </Grid>
                  <Grid item className={classes.gridCardContent}>
                    <Typography  gutterBottom>
                      A complex indicator editor that can combine multiple Basic Indicators.
                    </Typography>
                    <Typography >
                      It follows two analysis steps:
                    </Typography>
                    <Typography  style={{marginTop: 6}}>
                      <li>Select multiple Basic Indicators of same or different analysis methods</li>
                      <li>The analysis of indicators are merged and further analyzed and visualized</li>
                    </Typography>
                  </Grid>
                </Grid>
              </Paper>
            </Grid>
          </Grid>
        </Grid>
        <SnackbarMessage
          message={"Not available at the moment"}
          type={"warning"}
          openSnackbar={openEditorErrorSnackbar}
          setOpenSnackbar={setOpenEditorErrorSnackbar}
          duration={4000}
        />
      </DialogContent>
    </Dialog>
  )
};
